<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'table/list_show.css'?>">
<!--- Dialog Addon --->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<form id="main-form" action="<?php echo site_url().'/user_group3/account/edit_user_workedplace'?>" method="post">
    <ol>

        <input id="currentid" name="currentid" value="-2" type="hidden">
        <li>
            <div class="head">Working At </div>
            <input placeholder="Company Name "title="Company Name" class="text" name="WorkingPlace" id="working-place" tpye="text" value="<?php echo $UserInfo['WorkingPlace']?>">
        </li>
        <li>
            <div class="head">Experience
                <div id="add-new-workedplace" class="margin-left add-btn" style='position:relative; left: 11%'>Add New</div>
            </div>
            <?php 
                $CI = &get_instance();
                $this->load->helper("string_addition");
                $WorkedPlaces =  $CI->db->get_where(MYSQL_TABLE_PREFLIX.TABLE_USER3_WORKEDPLACES, 
                        array('RelUserEmail' => $UserInfo['UserEmail']));
                $WorkedPlaces = $WorkedPlaces->result_array();    
                $Header = array('Company Name', 'Company Link','Year');
                print_table(
                        $Header,$WorkedPlaces,
                        array(
                            'CompanyName','CompanyLink','Year'
                            ),
                        true,
                        true
                        );
            ?>
        </li>
        <div class="hr"></div>
        <div id="add-edit-section">
        
        </div>
        <li>
            <div id="main-form-submit-btn" class="submit-bt">Save</div>
        </li>
    </ol>
</form>

<script src="<?php echo asset_url()."js/string_helper.js"?>"></script>
<?php include js_url(true).'/validate_things.php'?>
<script>
    var WorkedPlaces = <?php echo json_encode($WorkedPlaces);?>;
    var validate_company_link = function(){
        isPass = true;
        value = $("#company-link").val();
        if(value.length != 0 && !is_valid_url(value)){
            $("#company-link").attr("class","text-error");
            isPass = false;
        }
        else{
            $("#company-link").attr("class","text");
        }
        return isPass;
    }
    var validate_name = function(){
        isPass = true;
        value = $("#company-name").val();
        if(value.length == 0){
            $("#company-name").attr("class","text-error");
            isPass = false;
        }else{
            $("#company-name").attr("class","text");
        }
        return isPass;
    }
    
    var validate_year = function(){
        isPass = true;
        value = $("#year").val();
        if(value.length == 0){
            $("#year").attr("class","text-error");
            isPass = false;
        }else{
            $("#year").attr("class","text");
        }
        return isPass;
    }
    var validate_all = function(){
        isPass = true;
        if(!validate_company_link()) isPass = false;
        if(!validate_name()) isPass = false;
        if(!validate_year()) isPass = false;
        return isPass;
    }
    var update = function(){
        $("#company-name").on("change", validate_name);
        $("#year").on("change", validate_year);
        $("#company-link").on("change", validate_company_link);
    }
    
    var update_stop_workedplace = function(){$("#stop-add-edit-workedplace").on("click",function(){
        $("#currentid").val(-2);
        $("#add-edit-section").html("");
        $(this).attr("id","add-new-workedplace");
        $(this).text("Add New");
        update_add_workedplace();
    });}
     
    var update_add_workedplace = function(){$("#add-new-workedplace").on("click",function(){
        $("#currentid").val(-1);
        data = '<div class="head">Add New:</div>'
        +'<div class="tab">'
            +'<li>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Company Name:</div>'
                    +'<input id="company-name" name="CompanyName" class="text" style="width:80%">'
                +'</div>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Company Link: (Opt)</div>'
                    +'<input id="company-link" name="CompanyLink" class="text" style="width:80%">'
                +'</div>'
            +'</li>'       
            +'<li>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Year:</div>'
                    +'<input id="year" name="Year" class="text" style="width:80%">'
                +'</div>'        
            +'</li>'
            +'<li>'
                +'<div class="head">Describtion: (Opt)</div>'
                +'<textarea id="describtion" name="Describtion" class="text" style="width:80%"></textarea>'
            +'</li>';
        $("#add-edit-section").html(data);
        $(this).attr("id","stop-add-edit-workedplace");
        $(this).text("Not Add");
        update_stop_workedplace();
        update();
    });}
    
    
    update_add_workedplace();
    
    //-------------- Edit And Remove Btn Handler---------------
    $("div[button='edit-btn']").on("click",function(){
        var id = $(this).attr('number');
        id = parseInt(id); 
        WorkedPlace = WorkedPlaces[id];
        data = ('<div class="head">Edit:</div>'
        +'<div class="tab">'
            +'<li>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Company Name:</div>'
                    +'<input id="company-name" name="CompanyName" class="text" style="width:80%" value="{0}">'
                +'</div>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Company Link: (Opt)</div>'
                    +'<input id="company-link" name="CompanyLink" class="text" style="width:80%" value="{1}">'
                +'</div>'
            +'</li>'       
            +'<li>'
                +'<div style="width:40%; display:inline-block">'
                    +'<div class="head">Year:</div>'
                    +'<input id="year" name="Year" class="text" style="width:80%" value="{2}">'
                +'</div>'
            +'</li>'
            +'<li>'
                +'<div class="head">Describtion: (Opt)</div>'
                +'<textarea id="describtion" name="Describtion" class="text" style="width:80%">{3}</textarea>'
            +'</li>').format(WorkedPlace['CompanyName'],WorkedPlace['CompanyLink'],WorkedPlace['Year'],WorkedPlace['Describtion']);;
        $("#currentid").val(WorkedPlace['WorkedPlaceID']);
        $("#add-edit-section").html(data);
        $("#add-new-workedplace").text("Not Add");
        $("#add-new-workedplace").attr("id","stop-add-edit-workedplace");
        update_stop_workedplace();
        update();
    });
    
    $('div[button="delete-btn"]').on('click',function(){
        var id = $(this).attr('number');
        id = parseInt(id); 
        ConfirmDialog("Are you sure to delete this place?", id, delete_worked_place);
    });
    
    function delete_worked_place(id){
        WorkedPlace = WorkedPlaces[id];
        url_link = "<?php echo site_url()."/user_group3/account/delete_workedplace"?>";
        var result;
        $.ajax({
            url : url_link,
            type: 'post',
            async: false,
            data: { ID : WorkedPlace['WorkedPlaceID'] },
            success: function(data){
                result = data;
            } 
        });
        if(result == 1 || result == '1'){
            $('div[number='+id+']').parent().parent().remove();
        }
    }
    
    function ConfirmDialog(message, id, okfunction){
    $('<div></div>').appendTo('body')
                    .html('<div><h6>'+message+'?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");
                                okfunction(id);
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
    };
    //-------------- End of Edit And Remove Btn Handler---------------
    $("div#main-form-submit-btn").on("click",function(){
        id = $("#currentid").val();
        id = parseInt(id);
        if( id == -2 || validate_all()){
            $("#main-form").submit();
        }
    });
</script>